<template>
	<div id="AwakeBB">
		<div v-if="isOrder" style="margin: 15px;">
			<el-form :inline="true" :model="searchform" class="form" v-loading="searchLoading">
				<el-form-item label="">
					<el-input :size="btnsize" v-model="searchform.name" placeholder="名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button :size="btnsize" type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :size="btnsize" type="primary" @click="onSearchNullChineseName">查询中文为空的spine</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :size="btnsize" type="primary" @click="setSpine">set {{setres}}</el-button>
				</el-form-item>
				{{ spine.name }}
			</el-form>
			<el-row>
				<el-col :span="attributesSpan" v-for="(item,index) in spineList" :key="item.id">
					<div v-on:click="getSpine(item)" class="outerContainer">
						{{ item.name }} {{ item.chineseName }}
					</div>
				</el-col>
			</el-row>
			<div class="block" v-if="isMobile">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" :pager-count="5"
					layout="prev, pager, next" :total="total">
				</el-pagination>
			</div>
			<div class="block" v-else>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" :pager-count="11"
					layout="sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<el-form v-if="!isOrder" :inline="true" :model="updateform" class="form" v-loading="updateLoading">
			<el-form-item label="" style="width: 500px;">
				<el-input :size="btnsize" v-model="updateform.name" placeholder="名称"></el-input>
			</el-form-item><br/>
			<el-form-item>
				<el-button :size="btnsize" type="primary" @click="onUpdate">更新</el-button>
			</el-form-item>
			{{ code }} {{ spine.name }} {{ spine.chineseName }}
		</el-form>
		<el-button :size="btnsize" v-on:click="returnOrder" v-if="!isOrder">返回列表</el-button>
		<div id="player"></div>
	</div>
</template>

<script>
	import {
		yiyuziApi
	} from '@/api/yiyuziApi';

	export default {
		name: 'AwakeBBCreate',
		components: {},
		data() {
			return {
				spineList: [],
				isOrder: true,
				attributesSpan: 6,
				isMobile: false,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				updateform: {
					name: ''
				},
				searchform: {
					name: ''
				},
				thisSpine:[],
				updateLoading:false,
				searchLoading:false,
				code:0,
				spine:{'name':"test",'chineseName':"","id":0},
				btnsize: "mini",
				setres: 0,
			}
		},
		mounted() {
			this._isMobile();
			this.getSpineList();
		},
		methods: {
			async setSpine() {
				try {
					// this.searchLoading = true;
					let result = await yiyuziApi.setSpine();
					this.setres = result.data.code;
					// this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},
			async getSpineList() {
				try {
					// this.searchLoading = true;
					let result = await yiyuziApi.getSpineListCreator(this.currentPage, this.pageSize);
					this.spineList = result.data.data.list;
					this.total = result.data.data.total;
					// this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},

			getSpine(item) {
				let fatherId = item.id;
				this.isOrder = false;
				this.spine = item;
				let atlas = yiyuziApi.getSpineUrl(fatherId, "atlas");
				let skel = yiyuziApi.getSpineUrl(fatherId, "skel");

				// document.getElementById("AwakeBB").appendChild();
				new spine.SpinePlayer("player", {
					skelUrl: skel,
					atlasUrl: atlas,
					backgroundColor: "#ffffff",
				})
			},

			returnOrder() {
				this.isOrder = true;
				// 清空div内的子元素
				document.getElementById("player").innerHTML = "";
				this.code = 0;
				this.updateform.name = "";
			},
			
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getSpineList();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getSpineList();
			},
			
			async onSearch() {
				try {
					let str = this.searchform.name.replace(/(^\s*)|(\s*$)/g, '');//去除空格;
					if (str != null && str != "" && str != undefined && str != "_"){
						this.searchLoading = true;
						let result = await yiyuziApi.getSpineListByNameAndPage("1", "300", str);
						this.spineList = result.data.data.list;
						this.total = result.data.data.total;
						this.searchLoading = false;
					} else {
						console.error("查询参数不能为空");
					}
				} catch (e) {
					console.error(e);
				}
			},
			
			async onSearchNullChineseName() {
				try {
					this.searchLoading = true;
					let result = await yiyuziApi.getNullChineseNameSpineListCreator("1", "300");
					this.spineList = result.data.data.list;
					this.total = result.data.data.total;
					this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},
			
			async onUpdate() {
				try {
					this.updateLoading = true;
					let result = await yiyuziApi.updateSpineChineseName(this.spine.id, this.updateform.name);
					this.code = result.data.code;
					this.updateLoading = false;
				} catch (e) {
					console.error(e);
				}
			},

			_isMobile() {
				this.isMobile = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				);
				this.pageSize = this.isMobile ? 10 : 20;
				this.attributesSpan = this.isMobile ? 24 : 12;
				this.btnsize = this.isMobile ? "mini" : "";
			}
		}
	}
</script>

<style>
	.outerContainer {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		color: #333;
		border-radius: 10px;
		padding: 5px;
		margin: 10px;
		margin-bottom: 10px;
	}
	
	.outerContainer:hover {
		background-color: #B3C0D1;
		cursor: pointer;
	}
	
</style>
